import { defaultRuleOptions } from '@VEC/global.ts'
import uniqueId from '@VEC/uniqueId.ts'

// import Size from './props/Size.vue'
// import ShowSubTitle from './props/ShowSubTitle.vue'
// import ShowFun from './props/showExtra.vue'

const type = 'Layout-Section';

export default defaultRuleOptions({
    icon: '&#xe6ac;',
    name: '卡片',
    type: type,
    Tools: {
        Hide: false,
    },
    DragType: 'Ele',
    rule() {
        return {
            type: type,
            field: uniqueId(),
            title: '卡片',
            props: {
                size: 'small',
                SE: false,
                SS: false,
                SP_I: 'QuestionCircleOutlined',
                SP_IS: '16px',
                SP_IC: '#000000d9',
                SP_T: '说明文字',
                SP_BC: '#000000d9',
                SP_TC: '#ffffff',
                SP_D: 'right',
                SP: true,
                SL: true,
                T_T: 'Title',
                T_C: '#000000',
                T_F: '14px'
            },
            codes: {},
            style: {},
            events: {},
            slots: {
                default: [{
                    type: 'Layout-Container',
                    field: uniqueId(),
                    style: {},
                    events: {},
                    props: { title: '内容' },
                    slots: { default: [], },
                }],
            },
        }
    },
    props() {
        return [
            'Field',
            'Title',
            {
                type: 'Group',
                props: {
                    title: '基本属性',
                },
                children: [
                    { key: 'size', type: 'Form:select', label: '尺寸', options: [{ label: '正常', value: 'default' }, { label: '小', value: 'small' }] },
                    { key: 'SS', type: 'Form:switch', label: '副标题插槽', },
                    { key: 'SE', type: 'Form:switch', label: '功能区插槽', },
                    { key: 'SL', type: 'Form:switch', label: '分割线', },
                    { key: 'FQ', type: 'Form:switch', label: '浮起', },
                    { key: 'lod', type: 'Form:switch', label: '加载状态', },
                ]
            },
            {
                type: 'Group',
                props: {
                    title: '提示文本',
                },
                extra: { key: 'SP' },
                children: [
                    { key: 'SP_I', default: 'QuestionCircleOutlined', type: 'Form:icon', label: '选择图标', watchList: [{ key: 'SP', event: 'Comp.show = value == true' }] },
                    { key: 'SP_IS', default: '16px', type: 'Form:size', label: '图标大小', watchList: [{ key: 'SP', event: 'Comp.show = value == true' }] },
                    { key: 'SP_IC', default: '#000000d9', type: 'Form:color', label: '图标颜色', watchList: [{ key: 'SP', event: 'Comp.show = value == true' }] },
                    { key: 'SP_T', default: '说明文字', type: 'Form:input', label: '提示文本', watchList: [{ key: 'SP', event: 'Comp.show = value == true' }] },
                    { key: 'SP_TC', default: '#ffffff', type: 'Form:color', label: '文字颜色', watchList: [{ key: 'SP', event: 'Comp.show = value == true' }] },
                    { key: 'SP_D', default: 'right', type: 'Form:direction', label: '提示方向', watchList: [{ key: 'SP', event: 'Comp.show = value == true' }] },
                    { key: 'SP_BC', default: '#000000d9', type: 'Form:color', label: '背景颜色', watchList: [{ key: 'SP', event: 'Comp.show = value == true' }] },

                ]
            },
            {
                type: 'Group',
                props: {
                    title: '标题',
                },
                children: [
                    { key: 'T_T', type: 'Form:input', label: '文本内容' },
                    { key: 'T_FF', type: 'Form:fontfamily', label: '字体类型' },
                    { key: 'T_C', type: 'Form:color', label: '字体颜色' },
                    { key: 'T_F', type: 'Form:size', label: '字体大小' },
                ]
            },
        ]
    },
})